// 页面切换动画效果
// Page transition animations

// 1. 左侧滑入动画 - Slide Left
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

// 2. 右侧滑入动画 - Slide Right
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-right-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// 3. 上方滑入动画 - Slide Up
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

// 4. 下方滑入动画 - Slide Down
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-down-enter-from {
  opacity: 0;
  transform: translateY(-30px);
}

.slide-down-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

// 5. 淡入淡出动画 - Fade
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 6. 淡入缩放动画 - Fade Scale (默认)
.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-scale-enter-from {
  opacity: 0;
  transform: scale(0.9);
}

.fade-scale-leave-to {
  opacity: 0;
  transform: scale(1.1);
}

// 7. 淡入滑动动画 - Fade Slide
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

// 8. 缩放动画 - Zoom
.zoom-enter-active,
.zoom-leave-active {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zoom-enter-from {
  opacity: 0;
  transform: scale(0.5);
}

.zoom-leave-to {
  opacity: 0;
  transform: scale(1.5);
}

// 9. 缩放淡出动画 - Zoom Fade
.zoom-fade-enter-active,
.zoom-fade-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.zoom-fade-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.zoom-fade-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

// 10. 翻转动画 - Flip
.flip-enter-active,
.flip-leave-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.flip-enter-from {
  opacity: 0;
  transform: rotateY(90deg);
}

.flip-leave-to {
  opacity: 0;
  transform: rotateY(-90deg);
}

// 11. 旋转动画 - Rotate
.rotate-enter-active,
.rotate-leave-active {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-style: preserve-3d;
}

.rotate-enter-from {
  opacity: 0;
  transform: rotate(180deg) scale(0.5);
}

.rotate-leave-to {
  opacity: 0;
  transform: rotate(-180deg) scale(0.5);
}

// 12. 弹跳动画 - Bounce
.bounce-enter-active {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-leave-active {
  animation: bounce-out 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-50px);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1) translateY(0);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) translateY(50px);
  }
}

// 13. 弹性动画 - Elastic
.elastic-enter-active {
  animation: elastic-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.elastic-leave-active {
  animation: elastic-out 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

@keyframes elastic-in {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-360deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2) rotate(0deg);
  }
  75% {
    transform: scale(0.9) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes elastic-out {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1) rotate(-5deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
}

// 14. 无动画 - None
.none-enter-active,
.none-leave-active {
  transition: none;
}

// 优化性能：使用 GPU 加速
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active,
.slide-up-enter-active,
.slide-up-leave-active,
.slide-down-enter-active,
.slide-down-leave-active,
.fade-scale-enter-active,
.fade-scale-leave-active,
.fade-slide-enter-active,
.fade-slide-leave-active,
.zoom-enter-active,
.zoom-leave-active,
.zoom-fade-enter-active,
.zoom-fade-leave-active,
.flip-enter-active,
.flip-leave-active,
.rotate-enter-active,
.rotate-leave-active {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

// 确保动画容器设置
.page-transition-container {
  position: relative;
  width: 100%;
  height: 100%;
}

// =====================================
// 覆盖 Element Plus 默认 dialog 动画
// =====================================
// Element Plus dialog 使用 .dialog-fade 作为默认 transition name
// 我们通过 data-page-animation 属性来动态覆盖默认动画

// 1. Slide Left 动画
[data-page-animation="slide-left"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .dialog-fade-enter-from {
    opacity: 0 !important;
    transform: translateX(30px) !important;
  }

  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: translateX(-30px) !important;
  }
}

// 2. Slide Right 动画
[data-page-animation="slide-right"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .dialog-fade-enter-from {
    opacity: 0 !important;
    transform: translateX(-30px) !important;
  }

  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: translateX(30px) !important;
  }
}

// 3. Slide Up 动画
[data-page-animation="slide-up"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .dialog-fade-enter-from {
    opacity: 0 !important;
    transform: translateY(30px) !important;
  }

  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: translateY(-30px) !important;
  }
}

// 4. Slide Down 动画
[data-page-animation="slide-down"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .dialog-fade-enter-from {
    opacity: 0 !important;
    transform: translateY(-30px) !important;
  }

  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: translateY(30px) !important;
  }
}

// 5. Fade 动画
[data-page-animation="fade"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: opacity 0.3s ease !important;
  }

  .dialog-fade-enter-from,
  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: none !important;
  }
}

// 6. Fade Scale 动画（默认）
[data-page-animation="fade-scale"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .dialog-fade-enter-from {
    opacity: 0 !important;
    transform: scale(0.9) !important;
  }

  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: scale(1.1) !important;
  }
}

// 7. Fade Slide 动画
[data-page-animation="fade-slide"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .dialog-fade-enter-from {
    opacity: 0 !important;
    transform: translateY(20px) !important;
  }

  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
  }
}

// 8. Zoom 动画
[data-page-animation="zoom"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .dialog-fade-enter-from {
    opacity: 0 !important;
    transform: scale(0.5) !important;
  }

  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: scale(1.5) !important;
  }
}

// 9. Zoom Fade 动画
[data-page-animation="zoom-fade"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  .dialog-fade-enter-from {
    opacity: 0 !important;
    transform: scale(0.8) !important;
  }

  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: scale(0.8) !important;
  }
}

// 10. Flip 动画
[data-page-animation="flip"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
  }

  .dialog-fade-enter-from {
    opacity: 0 !important;
    transform: rotateY(90deg) !important;
  }

  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: rotateY(-90deg) !important;
  }
}

// 11. Rotate 动画
[data-page-animation="rotate"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    transform-style: preserve-3d !important;
  }

  .dialog-fade-enter-from {
    opacity: 0 !important;
    transform: rotate(180deg) scale(0.5) !important;
  }

  .dialog-fade-leave-to {
    opacity: 0 !important;
    transform: rotate(-180deg) scale(0.5) !important;
  }
}

// 12. Bounce 动画
[data-page-animation="bounce"] {
  .dialog-fade-enter-active {
    animation: dialog-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    transition: none !important;
  }

  .dialog-fade-leave-active {
    animation: dialog-bounce-out 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
    transition: none !important;
  }
}

@keyframes dialog-bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-50px);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1) translateY(0);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes dialog-bounce-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) translateY(50px);
  }
}

// 13. Elastic 动画
[data-page-animation="elastic"] {
  .dialog-fade-enter-active {
    animation: dialog-elastic-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    transition: none !important;
  }

  .dialog-fade-leave-active {
    animation: dialog-elastic-out 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
    transition: none !important;
  }
}

@keyframes dialog-elastic-in {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-360deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2) rotate(0deg);
  }
  75% {
    transform: scale(0.9) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes dialog-elastic-out {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1) rotate(-5deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
}

// 14. None 动画
[data-page-animation="none"] {
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: none !important;
    animation: none !important;
  }
}